<template>
  <div class="managerDetail">
    <el-form label-width="160px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="姓名:">{{manager.name}}</el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="手机号:">{{manager.phone}}</el-form-item>
        </el-col>
      </el-row>

     <el-row>
        <el-col :span="10">
          <el-form-item label="头像:">
            <img v-if="manager.imgUrl" :src="manager.imgUrl" class="cover">
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">
          <el-form-item label="地址:">{{manager.address}}</el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="22">
          <el-form-item label="负责配货地址:">
            <el-tag
              :key="tag"
              v-for="tag in dynamicTags"
              :disable-transitions="false">
              {{tag}}
            </el-tag>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">
          <el-form-item label="已获佣金:">{{manager.rewardMoney}}</el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="冻结佣金:">{{manager.frozenMoney}}</el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">
          <el-form-item label="未结算佣金:">{{manager.nobalanceMoney}}</el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">
          <el-form-item label="状态:">
            {{manager.status == 0 ? '正常': '冻结'}}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">
          <el-form-item>
            <el-button type="primary" @click="goBack()">返 回</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="split"></div>

    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="createtime" label="时间" align="center" :formatter="dateFormat"></el-table-column>
      <el-table-column prop="reward" label="获得佣金" align="center"></el-table-column>
    </el-table>
    
    <el-pagination
      background
      layout="prev, pager, next"
      :total="totalCount" :page-size="paramObj.limit" @current-change="handleCurrentChange">
    </el-pagination>
 
  </div>
</template>

<script>
import api from "@/api/manager";
import { formatDate } from "@/utils/date";

const SUCCESS = 0;
const LIMIT = 10;
export default {
  data() {
    return {
      id: null,
      manager: {},
      dynamicTags: [],
      tableData: [],
      totalCount: 0,
      paramObj: {
        managerId: null,
        currentPage: 1,
        limit: LIMIT
      }
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.paramObj.managerId = this.$route.query.id;
    if (this.id) {
      this._getDetail();
      //获取佣金明细列表
      this._getRewardList();
    } else {
      this.$message({
        type: "warning",
        message: "获取参数失败,请返回列表页重试!"
      });
    }
  },
  methods: {
    dateFormat(row, column) {
      let date = row[column.property];
      if (date == undefined) {
        return "";
      }
      date = new Date(date);
      let format = "yyyy-MM-dd hh:mm:ss";
      return formatDate(date, format);
    },
    handleCurrentChange(val) {
      this.paramObj.currentPage = val;
      this._getRewardList();
    },
    handleView(index, row) {
      this.$router.push({ path: "/order/detail", query: { id: row.id } });
    },
    _getDetail() {
      api.getDetail(this.id).then(response => {
        if (response.code == SUCCESS) {
          this.manager = response.data.manager;
          this.dynamicTags = this.manager.manageAddress.split(",");
        }
      });
    },
    _getRewardList() {
      api.getRewardLogList(this.paramObj).then(response => {
        if (response.code == SUCCESS) {
          this.tableData = response.data.rewardLogList;
        }
      });
    },
    goBack() {
      this.$router.back();
    }
  }
};
</script>

<style lang="less">
.managerDetail {
  padding-bottom: 100px;
  .cover {
    width: 150px;
    height: 150px;
    border-radius: 4px;
    border: 1px dashed #d9d9d9;
  }

  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .split {
    border-top: 1px dashed #999;
    margin: 20px 0;
  }

  .el-button {
    padding-left: 50px !important;
    padding-right: 50px !important;
  }
}
</style>